<template>
    <div class="BookList">
        <div class="Nav">
            <div class="back" @click="goback"><van-icon name="arrow-left" size="20px" color="gray" /></div>
            <div class="BookTitle">{{ BookListTitle }}</div>
        </div>
        <!-- 书单列表 -->
        <div class="item-box">
            <div class="item" v-for="(item, index) in books" :key="index" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" :alt="item.title" />
                </div>
                <div class="rigInfo">
                    <div class="title">{{ item.title }}</div>
                    <div class="author">{{ item.author }}</div>
                    <div class="desc">{{ item.content }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "BookList",
    data() {
        return {
            // 书单url
            url: null,
            // 书单标识标题
            title: null,
            // 书单标题
            BookListTitle: null,
            // 书单数据
            books: null,
        };
    },
    created() {
        // 接收url和title
        this.url = this.$route.query.url;
        this.title = this.$route.query.title;
        this.getBookList();
    },
    methods: {
        // 请求书单数据
        getBookList() {
            this.axios({
                method: "get",
                url: "store/bookList.json?" + this.url,
            })
                .then((res) => {
                    //
                    if (res.data.resDesc == "成功") {
                        this.BookListTitle = res.data.data.title;
                        this.books = res.data.data.books;
                    }
                })
                .catch((err) => {});
        },
        // 跳转详情
        goBookDetails(BookId, title) {
            if (BookId.split("_")[0] == "audio") {
                this.$router.push({
                    name: "ListenBook",
                    query: {
                        BookId,
                        title,
                    },
                });
            } else {
                this.$router.push({
                    name: "BookDetails",
                    query: {
                        BookId,
                        title,
                    },
                });
            }
        },
        goback() {
            this.$router.back();
        },
    },
};
</script>

<style lang="less" scoped>
.BookList {
    .item-box {
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        margin-top: 50px;
        .item {
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            .img-box {
                width: 82px;
                height: 100px;
            }
            .rigInfo {
                width: calc(100% - 82px);
                height: 100px;
                padding-left: 10px;
                .title {
                    font-size: 16px;
                    font-weight: 700;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    margin-bottom: 10px;
                }
                .desc {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-align: left;
                    line-height: 20px;
                }
                .author {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    text-align: left;
                    margin-bottom: 20px;
                }
            }
        }
    }
    .Nav {
        height: 50px;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding-left: 10px;
        margin-bottom: 10px;
        position: fixed;
        top: 0;
        width: 100%;
        .back {
            width: 5%;
        }
        .BookTitle {
            width: 80%;
            text-align: center;
            font-size: 16px;
            color: #000;
        }
    }
}
</style>
